<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
    <style>
        .active{
            background-color: rgb(197, 169, 198);
        }

        .noActive{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <!-- 创建容器 -->
    <div id="app">
        <!-- 插值语法,数据保存在data或者直接保存在实例vm上 -->
        <h1>{{count}}</h1>
        <button @click.once="add">累加</button>
        <br />
        <input type="text" @keyup="print">
        <br />
        <input type="text" @keydown.tab="print">
        <br />
        <input type="text" @keydown.enter="print">
        <br />
        <input type="text" @keyup.left="add">
        <br />
        <div @contextmenu.prevent="" :class="isActive?'active':'noActive'" :style="divStyle">我阻止了浏览器默认的右键事件</div>
    </div>
    <script>
        //实例化一个vm,Vue是MVVM模型中的核心
        //Vue是一个构造函数 使用时需实例化
        const vm = new Vue({
            // el:string | selector
            el: "#app",
            // data:Object|function
            data() {
                return {
                    count: 0,
                    isActive: true,
                    divStyle: {
                        width: "100px",
                        height: "100px",
                        border: "1px solid #ccc"
                    }
                }
            },
            methods: {
                add() {
                    this.count++
                    console.log("add");
                },
                print() {
                    console.log(this.count);
                }
            }})
    </script>
</body>

</html>